<script setup lang="ts">
import { provide } from 'vue'
import { NIcon, NImage, NButton } from 'naive-ui'
import { ArrowRightAltFilled } from '@vicons/material'
import { onMounted, ref } from 'vue'
import type { BatchInfoModel } from '@/api/batch'
import { sendRequest } from '@/utils/api'
import type { HttpResponse } from '@/utils/http'
import { useRoute } from 'vue-router'
import VBackImg from '@/assets/images/back.png'
import useRouteReplace from '@/hooks/useRouteReplace'
import BatchInfo from './components/BatchInfo.vue'
import RegisteredItemDetail from './components/RegisteredItemDetail.vue'
import FixedAction from '@/components/FixedAction.vue'

const route = useRoute()
const routeReplace = useRouteReplace(route.query.redirect as string)
const identifyTypeCode = ref('A3101')

const processInfo = ref(
  {} as {
    finish: boolean
    register: boolean
    submit: boolean
  }
)
const process = async (identifyId?: number) => {
  if (!identifyId) return (processInfo.value = { finish: false, register: false, submit: false })

  const [error, res] = await sendRequest({
    module: 'batch',
    api: 'identifyProcess',
    override: {
      params: {
        batchId: route.params.id,
        identifyId: identifyId || null
      }
    }
  })
  if (error) throw error
  if (res.code !== 0) throw new Error(res.msg)
  processInfo.value = res.data
}
provide('process', process)

const djBatchDetail = ref({} as BatchInfoModel)
const queryDjBatchDetail = async () => {
  try {
    const [error, res] = await sendRequest<HttpResponse<BatchInfoModel>>({
      module: 'batch',
      api: 'formInfo',
      override: {
        params: {
          batchId: route.params.id
        }
      }
    })
    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    djBatchDetail.value = res.data
  } catch (error) {
    console.error(error)
  }
}

onMounted(() => queryDjBatchDetail())
</script>

<template>
  <div class="registered-detail">
    <div class="bd-title">鉴定流程</div>
    <div class="bd-flow bd-card">
      <div
        class="step"
        :class="{ finished: processInfo.submit }"
      >
        提交鉴定
      </div>
      <NIcon
        color="#6CB187"
        size="32"
      >
        <ArrowRightAltFilled />
      </NIcon>
      <div
        class="step"
        :class="{ finished: processInfo.register }"
      >
        鉴定登记
      </div>
      <NIcon
        color="#6CB187"
        size="32"
      >
        <ArrowRightAltFilled />
      </NIcon>
      <div
        class="step"
        :class="{ finished: processInfo.finish }"
      >
        鉴定结束
      </div>
    </div>
    <div class="br"></div>

    <BatchInfo />
    <div class="br"></div>

    <div class="bd-tab">
      <div
        class="bd-tab__item"
        :class="{ active: identifyTypeCode === 'A3101' }"
        @click="identifyTypeCode = 'A3101'"
      >
        价值评估
      </div>
      <div
        class="bd-tab__item"
        :class="{ active: identifyTypeCode === 'A3102' }"
        @click="identifyTypeCode = 'A3102'"
      >
        价格评估
      </div>
    </div>

    <RegisteredItemDetail
      identifyTypeCode="A3101"
      v-if="identifyTypeCode === 'A3101'"
    />
    <RegisteredItemDetail
      identifyTypeCode="A3102"
      v-else
    />
  </div>

  <FixedAction>
    <div class="registered-detail-buttons">
      <NButton
        ghost
        @click="routeReplace"
        :style="`width: 78px; color: #5fb17f`"
      >
        <template #icon>
          <NImage
            :src="VBackImg"
            :style="`width: 50rem; height: 50rem`"
            preview-disabled
          ></NImage>
        </template>
        返回
      </NButton>
    </div>
  </FixedAction>
</template>

<style scoped lang="scss">
.registered-detail {
  min-height: 100%;
  padding: 15rem 0 110rem;
  background-color: #f0efee;

  .br {
    position: relative;
    width: 100%;
    padding: 30rem 0;

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      top: 50%;
      left: 0;
      border-top: 1px dotted #bc9e70;
      transform: translateY(-50%);
    }
  }
}

.bd-tab {
  display: flex;
  align-items: center;
  border-radius: 4rem;
  padding: 5rem 4rem;
  width: 50%;
  margin: 0 auto 20rem;
  text-align: center;
  background-color: #ebeceb;

  &__item {
    flex: 1;
    padding: 5rem 10rem;
    border-radius: 2rem;
    transition: all 0.3s ease-in-out;
    cursor: pointer;

    &.active {
      color: #fff;
      background-color: #6cb187;
    }
  }
}

.jdbh-select {
  position: relative;

  &::after {
    content: '可点击下拉查看其余鉴定信息';
    position: absolute;
    left: 0;
    font-size: 12rem;
    bottom: 0;
    translate: 0 100%;
    color: red;
  }
}

.br {
  position: relative;
  width: 100%;
  padding: 30rem 0;

  &::after {
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    border-top: 1px dotted #bc9e70;
    transform: translateY(-50%);
  }
}

.bd-card {
  padding: 20rem;
  background-color: #e1e1e1;
}

.n-form.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 60rem;

  &.grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.n-form.attachment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rem 15rem;
  padding: 20rem 30rem;

  .attachment {
    &-title {
      margin-bottom: 0.5em;
      font-weight: 600;
      font-size: 16rem;
    }

    .n-form-item {
      margin-left: 2em;
    }
  }
}

.bd-title {
  font-size: 26rem;
  margin-bottom: 30rem;
  color: #048c5e;
  line-height: 1;
}

.bd-flow {
  display: flex;
  align-items: center;
  padding: 20rem 20rem 30rem;
  gap: 0 1.5em;

  .step {
    padding: 10rem 15rem;
    background-color: #e1e1e1;

    &.finished {
      color: #fff;
      background-color: #6cb187;
    }
  }
}

.registered-detail-buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0 16rem;
}
</style>
